<template>
  <el-container>
    <el-header>
      <top-bar></top-bar>
      <div class="search-box">
        <div class="search-title">
          <span>Huahui 花卉网</span>
          <span>-花之思 只为你-</span>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-table
        ref="multipleTable"
        :data="collect"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          label="商品名称"
          width="320"
          prop="goodsDetail.goodsName"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="商品图片"
          width="320"
          prop=""
          align="center"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.goodsDetail.pictureUrl[0]['1']"
              fit="contain"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="goodsDetail.price"
          label="订购价"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="goodsDetail.nums"
          label="数量"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.goodsDetail.num" class="input-with-select" readonly>
              <el-button slot="prepend" icon="el-icon-minus" :disabled="scope.row.goodsDetail.num === 1" @click="jian(scope.$index)"></el-button>
              <el-button slot="append" icon="el-icon-plus" @click="jia(scope.$index)"></el-button>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" @click="del(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="settlement">
        <span>应付金额:</span>
        <span class="price">¥{{ total_price }}</span>
        <el-button @click="toPay">去结算</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import topBar from '../../components/topBar/index.vue'
export default {
  name: 'ShoppingCart',
  components: {
    topBar
  },
  data() {
    return {
      collect: [],
      multipleSelection: [],
      total_price: 0
    }
  },
  created() {
    const collect = window.localStorage.getItem('collect') || []
    this.collect = JSON.parse(collect)
  },
  methods: {
    // 去结算
    toPay() {
      if (this.multipleSelection.length == 0) {
        this.$message.error('请选择商品')
        return
      }
      this.$router.push({ // 核心语句
        path: '/pay', // 跳转的路径
        query: { // 路由传参时push和query搭配使用 ，作用时传递参数
          multipleSelection: JSON.stringify(this.multipleSelection)
        }
      })
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.total_price = 0
      this.multipleSelection.forEach(element => {
        this.total_price += (element.goodsDetail.price * element.goodsDetail.num)
      })
    },
    // 减
    jian(index) {
      this.collect[index].goodsDetail.num -= 1
      this.total_price = (this.collect[index].goodsDetail.num * this.collect[index].goodsDetail.price)
    },
    // 加
    jia(index) {
      this.collect[index].goodsDetail.num += 1
      this.total_price = (this.collect[index].goodsDetail.num * this.collect[index].goodsDetail.price)
    },
    del(index) {
      console.log(index)
      this.collect.splice(index, 1)
      window.localStorage.setItem('collect', JSON.stringify(this.collect))
    }
  }
}
</script>
<style lang="scss" scoped>
.el-container{
        width: 100%;
        height: 100%;
        min-width: 1200px;
        .el-header{
            display: flex;
            flex-direction: column;
            padding: 0;
            height: auto !important;
            min-width: 1500px;
            .top-nav-bar{
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #f1f3f6;
                color: #666e73;
                font-size: 12px;
                line-height: 40px;
                padding: 0 200px;
                .function-bar{
                    width: 40%;
                    display: flex;
                    justify-content: flex-start;
                    div{
                        margin-right: 50px;
                        span{
                            margin-right: 5px;
                        }
                    }
                }
            }
            .search-box{
              display: flex;
              align-items: center;
              padding:20px 0 20px 200px;
              .search-title{
                display: flex;
                flex-direction: column;
                color: #fd684a;
                margin-right: 50px;
                align-items: center;
                span:nth-child(1){
                  font-size: 35px;
                }
                span:nth-child(2){
                  color: #f8bcae;
                  font-size: 18px;
                }
              }
              .search{
                width: 500px;
                ::v-deep .el-input__inner{
                border-color: #fd684a !important;
                }
                ::v-deep  .el-input-group__append{
                  background-color: #fd5e40 !important;
                  color: white;
                  border-color: #fd5e40;
                }
              }
            }
        }
        .el-main{
            width: 1200px;
            min-width: 1200px;
            margin:0 auto;
            .settlement{
                font-size: 12px;
                line-height: 52px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                height: 52px;
                border: 1px solid #d9d9d9;
                border-right: 0;
                .price{
                    font-size: 18px;
                    font-weight: bold;
                    display: inline-block;
                    color: #ff6a00;
                    margin: 0 5px;
                }
                .el-button{
                    height: 100%;
                    border: none;
                    background-color: #fd6b25 !important;
                    color: white;
                    border-radius: 0;
                    margin-left: 5px;
                }
            }
        }
    }
</style>
